<template>
  <div class="class-report-stat">
    <div class="search-header mb-20">
      <el-date-picker
        v-model="selectDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期"
        size="small"
        class="mr-10"
      ></el-date-picker>
      <el-button type="primary" size="small" @click="loadData">查询</el-button>
      <el-button size="small" @click="refreshData">刷新</el-button>
    </div>
    
    <el-table 
      :data="classStatsList" 
      style="width: 100%"
      :stripe="true"
      :border="true"
      tooltip-effect="dark"
    >
      <el-table-column prop="class_name" label="班级" width="120" align="center"></el-table-column>
      <el-table-column prop="total_students" label="应填报人数" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.total_students }}
        </template>
      </el-table-column>
      <el-table-column prop="reported_count" label="已填报人数" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.reported_count }}
        </template>
      </el-table-column>
      <el-table-column prop="unreported_count" label="未填报人数" width="120" align="center">
        <template slot-scope="scope">
          <span class="text-warning">{{ scope.row.unreported_count }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="completion_rate" label="完成率" width="150" align="center">
        <template slot-scope="scope">
          <div class="completion-rate-container">
            <div class="completion-rate-bar">
              <div 
                class="completion-rate-progress" 
                :style="{ width: scope.row.completion_rate + '%' }"
                :class="{
                  'progress-low': scope.row.completion_rate < 60,
                  'progress-medium': scope.row.completion_rate >= 60 && scope.row.completion_rate < 90,
                  'progress-high': scope.row.completion_rate >= 90
                }"
              ></div>
            </div>
            <span class="completion-rate-text">{{ scope.row.completion_rate }}%</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="viewDetails(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div v-if="loading" class="loading-container">
      <el-loading text="加载中..."></el-loading>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api.js'

export default {
  name: 'ClassReportStat',
  props: {
    sectionId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      selectDate: new Date().toISOString().split('T')[0], // 默认今天
      classStatsList: [],
      loading: false
    }
  },
  watch: {
    sectionId: {
      handler(newVal) {
        if (newVal) {
          this.loadData()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 加载统计数据
    loadData() {
      this.loading = true
      const params = {
        section_id: this.sectionId,
        date: this.selectDate
      }
      
      this.$fetch(api.daily_feedback_class_stats, params).then((response) => {
        if (response.code === 0) {
          this.classStatsList = this.formatStatsData(response.list || [])
        } else {
          this.$message.error('获取统计数据失败')
          this.classStatsList = []
        }
      }).catch((err) => {
        console.error('获取统计数据错误:', err)
        this.$message.error('获取统计数据失败')
        this.classStatsList = []
      }).finally(() => {
        this.loading = false
      })
    },
    
    // 刷新数据
    refreshData() {
      this.loadData()
    },
    
    // 格式化统计数据
    formatStatsData(data) {
      return data.map(item => {
        const total = item.total_students || 0
        const reported = item.reported_count || 0
        const unreported = total - reported
        const completionRate = total > 0 ? Math.round((reported / total) * 100) : 0
        
        return {
          ...item,
          total_students: total,
          reported_count: reported,
          unreported_count: unreported,
          completion_rate: completionRate
        }
      })
    },
    
    // 查看详情
    viewDetails(row) {
      // 可以跳转到详情页面或者打开详情弹窗
      this.$emit('viewDetails', row)
    }
  }
}
</script>

<style scoped>
.class-report-stat {
  padding: 10px;
}

.search-header {
  display: flex;
  align-items: center;
}

.completion-rate-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.completion-rate-bar {
  flex: 1;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 10px;
}

.completion-rate-progress {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-low {
  background-color: #f56c6c;
}

.progress-medium {
  background-color: #e6a23c;
}

.progress-high {
  background-color: #67c23a;
}

.completion-rate-text {
  min-width: 40px;
  text-align: right;
  font-size: 12px;
}

.loading-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.text-warning {
  color: #e6a23c;
  font-weight: bold;
}
</style>